<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :width="width"
    :close-on-click-modal="false"
    :before-close="handleCancel"
  >
    <div class="box-list-container">
      <div class="box-query-form">
        <el-form :model="queryParam" label-width="auto" label-position="right" :gutter="24">
          <el-row>
            <el-col :xl="8" :lg="8" :md="12" :sm="24">
              <el-form-item label="客户参数:">
                <el-input v-model="queryParam.customerParameter" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :xl="8" :lg="8" :md="12" :sm="24">
              <el-form-item label="自己参数:">
                <el-input v-model="queryParam.oneselfParameter" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :xl="8" :lg="8" :md="12" :sm="24" class="table-search-btn">
              <el-button icon="el-icon-refresh" @click="searchReset">重置</el-button>
              <el-button type="primary" icon="el-icon-search" @click="searchQuery">查询</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="box-table">
        <div class="table-title">
          <div class="table-title-left">
            参数列表
          </div>
          <div>
            <el-button plain class="btnAdd" icon="el-icon-plus" @click="handleAdd('新增')">新增</el-button>
          </div>
        </div>
        <!-- 批量操作 -->
        <div v-if="selectedRowList.length" class="batchAction">
          <div class="batchAction-left">
            <el-dropdown>
              <el-button>
                批量操作 <i class="el-icon-arrow-down el-icon--right" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <div @click="batchDelete"><i class="el-icon-delete" />删除</div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="batchAction-right">
            已选择
            <span style="font-weight: 700">
              <el-link type="primary" :underline="false">{{ selectedRowList.length }}</el-link>
            </span>项
            <el-link type="primary" :underline="false" style="margin-left: 24px;" @click="onClearSelected">清空</el-link>
          </div>
        </div>
        <el-table ref="table" :data="dataSource" @selection-change="onSelectChange">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="customerParameter" label="客户参数" min-width="200" />
          <el-table-column prop="oneselfParameter" label="自己参数" min-width="200" />
          <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <el-button type="text" @click="handleEdit('编辑', scope.row)">编辑</el-button>
              <el-popconfirm title="确定删除吗？" style="margin-left: 10px" @confirm="handleDelete(scope.row[guidFieldName])">
                <el-button slot="reference" type="text" style="color: red;">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div class="box-paging">
          <Pagination
            v-show="ipagination.total > 0"
            layout="total, sizes, prev, pager, next"
            :total="ipagination.total"
            :page.sync="ipagination.pageNum"
            :limit.sync="ipagination.pageSize"
            @pagination="loadData"
          />
        </div>
      </div>
    </div>
    <addParamPage ref="modalForm" @ok="modalFormOk" />
  </el-dialog>
</template>

<script>
// import { postAction } from '@/api/manage'
import { listMixin } from '@/mixins/listMixin'
import Pagination from '@/components/Pagination'
import addParamPage from './addParamPage'

export default {
  components: {
    Pagination,
    addParamPage
  },
  mixins: [listMixin],
  data() {
    return {
      guidFieldName: 'id',
      visible: false,
      toggleSearchStatus: false,
      disableMixinCreated: true,
      title: '',
      ipagination: { // 分页参数
        pageNum: 1,
        pageSize: 50,
        total: 0
      },
      width: '1000px',
      url: {
        list: 'parameterList.aspx?action=GetList',
        delete: 'parameterList.aspx?action=Delete',
        deleteBatch: 'parameterList.aspx?action=DeleteBatch'
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    show(id) {
      this.fid = id
      console.log('this.fid', this.fid)
      this.$refs[this.refName]?.clearValidate()
      this.visible = true
      this.loadData(1)
    },
    // 添加查询参数 默认加空对象
    addQueryParams() {
      return {
        fid: this.fid
      }
    },
    handleCancel(done) {
      this.$emit('ok')
      done()
    },
    handleAdd(title) {
      console.log('this.fid', this.fid)
      this.$refs.modalForm.add(this.fid)
      this.$refs.modalForm.title = title
      this.$refs.modalForm.disableSubmit = false
    }
  }
}
</script>

<style lang="scss" scoped>
.updateForm{
  padding: 0 30px;
  ::v-deep .el-form-item__label{
    line-height: 16px;
  }
}
</style>
